<!DOCTYPE html>
<html>
<head>
    <title>Static Force Analysis Diagram</title>
    <style>
        body {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            margin: 0;
            background-color: #f0f0f0;
        }
        canvas {
            border: 1px solid #ccc;
            background-color: #fff;
        }
    </style>
</head>
<body>
    <canvas id="physicsCanvas" width="500" height="500"></canvas>
    <script>
        const canvas = document.getElementById('physicsCanvas');
        const ctx = canvas.getContext('2d');

        // Parameters
        const canvasWidth = canvas.width;
        const canvasHeight = canvas.height;
        const r = 80; // Radius of the circles for drawing
        const lineWidth = 3;
        const centerDotRadius = 5;

        // Set drawing styles
        ctx.lineWidth = lineWidth;
        ctx.strokeStyle = 'black';
        ctx.fillStyle = 'black';
        ctx.lineCap = 'round';

        // Calculate coordinates based on a central point to keep the drawing centered
        const centerX = canvasWidth / 2;
        // Position the ground line towards the bottom of the canvas
        const groundY = canvasHeight * 0.5 + r * Math.sqrt(3) / 2 + r + 20;

        // Centers of the circles
        const x1 = centerX - r;
        const y1 = groundY - r;
        const x2 = centerX + r;
        const y2 = y1;
        const x3 = centerX;
        const y3 = y1 - r * Math.sqrt(3);

        // --- Drawing ---

        // 1. Draw the ground with hatching
        ctx.beginPath();
        ctx.moveTo(0, groundY);
        ctx.lineTo(canvasWidth, groundY);
        ctx.stroke();

        // Hatching lines for the ground
        ctx.lineWidth = 1.5;
        const hatchLength = 15;
        const hatchSpacing = 10;
        for (let i = 0; i < canvasWidth + hatchLength; i += hatchSpacing) {
            ctx.beginPath();
            ctx.moveTo(i, groundY + hatchLength);
            ctx.lineTo(i - hatchLength, groundY);
            ctx.stroke();
        }
        ctx.lineWidth = lineWidth; // Reset line width

        // 2. Draw the three circles
        // Circle 1 (bottom left)
        ctx.beginPath();
        ctx.arc(x1, y1, r, 0, 2 * Math.PI);
        ctx.stroke();

        // Circle 2 (bottom right)
        ctx.beginPath();
        ctx.arc(x2, y2, r, 0, 2 * Math.PI);
        ctx.stroke();

        // Circle 3 (top)
        ctx.beginPath();
        ctx.arc(x3, y3, r, 0, 2 * Math.PI);
        ctx.stroke();
        
        // 3. Draw the line connecting the centers of the bottom circles
        ctx.beginPath();
        ctx.moveTo(x1, y1);
        ctx.lineTo(x2, y2);
        ctx.stroke();

        // 4. Draw the center points (filled dots)
        ctx.beginPath();
        ctx.arc(x1, y1, centerDotRadius, 0, 2 * Math.PI);
        ctx.fill();

        ctx.beginPath();
        ctx.arc(x2, y2, centerDotRadius, 0, 2 * Math.PI);
        ctx.fill();

        ctx.beginPath();
        ctx.arc(x3, y3, centerDotRadius, 0, 2 * Math.PI);
        ctx.fill();

        // 5. Draw the labels (O1, O2, O3)
        // Function to draw text with subscript for clarity
        function drawLabel(mainText, subText, x, y, mainOffsetX, subOffsetX) {
            ctx.font = "italic 32px 'Times New Roman'";
            ctx.fillText(mainText, x + mainOffsetX, y + 10);
            ctx.font = "22px 'Times New Roman'";
            ctx.fillText(subText, x + subOffsetX, y + 16);
        }
        
        // Label O1
        drawLabel('O', '1', x1, y1, -38, -22);
        
        // Label O2
        drawLabel('O', '2', x2, y2, 10, 28);
        
        // Label O3
        drawLabel('O', '3', x3, y3, 15, 33);

    </script>
</body>
</html>